<template>
	<view class="container">
		<view class="index-nav u-flex u-col-center u-row-center">
			<view class="item" v-for="(item,index) in navlist" :key="index" @click="change(index)">
				<text v-if="index == 0">{{params.gameZoneName||item}}</text>
				<text v-if="index == 1">{{(params.priceBegin && number2)?
				`${params.priceBegin}-${number2}`:item}}</text>
				<text v-if="index == 2">{{item}}</text>
				<image src="@/static/down.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="list">
			<view class="item u-flex u-col-top u-row-between" v-for="(item,index) in list" :key="index">
				<view class="img">
					<image :src=" item.image" mode="aspectFill" v-if="item.image"></image>
					<image src="@/static/img.png" mode="aspectFill" class="no" v-else></image>
				</view>
				<view class="con">
					<view class="title u-line-2">
						{{item.name}}
					</view>
					<view class="info">
						{{item.gameZoneName}}
					</view>
					<view class="info2" @click="open2(item)">
						<view class="i1 u-flex u-col-center">
							<text>ID:*** | *** </text>
							<image src="@/static/y.png" mode="aspectFill"></image>
						</view>
						<view class="i2">
							点击此处查看详细信息>>
						</view>
					</view>
					<view class="price" v-if="item.price">
						<text class="p"
							:class="{'p1':getPriceLength(item.price)<6,'p2':getPriceLength(item.price)==6,'p3':getPriceLength(item.price)==7,'p4':getPriceLength(item.price)==8,'p5':getPriceLength(item.price)>=9,}">{{$numToLocaleString(item.price)}}</text>
						<text class="y">MHB</text>
					</view>
				</view>
			</view>
			<view class="nolist" v-if="nolist">
				<image src="/static/kong2.png" mode="aspectFill"></image>
				<view class="p">
					抱歉，没有符合筛选条件的报价，请尝试更换搜索词
				</view>
			</view>
			<view class="nomore" v-if="nomore">
				没有更多啦~
			</view>
		</view>
		<uni-popup ref="popup1" type="top">
			<view class="pop-search">
				<view class="nav u-flex u-col-center u-row-center">
					<view class="item  u-flex u-col-center u-row-center" :class="{on:navindex==index}"
						v-for="(item,index) in navlist" :key="index" @click="change2(index)">
						<text v-if="index == 0">{{params.gameZoneName||item}}</text>
						<text
							v-if="index == 1">{{(params.priceBegin && number2)?`${params.priceBegin}-${number2}`:item}}</text>
						<text v-if="index == 2">{{item}}</text>
						<image src="@/static/down2.png" mode="aspectFill" v-if="navindex==index"></image>
						<image src="@/static/down.png" mode="aspectFill" v-else></image>
					</view>
				</view>
				<view class="middle" v-if="navindex == 0">
					<view class="search u-flex u-col-center u-row-between">
						<image src="@/static/search1.png" mode="aspectFill"></image>
						<input class="uni-input" v-model="kw" confirm-type="search" placeholder="请输入大区名称"
							placeholder-style="font-size: 26rpx;color: #D1D1D6;" @input="confirm" />
					</view>
					<view class="s-list" v-if="flist.length > 0">
						<view class="i" v-for="(item,index) in flist" :key="index" @click="changeZone(item)">
							<image src="@/static/search1.png" mode="aspectFill" class="image1"></image>
							<view class="m u-l-1">
								<rich-text :nodes="item.name2"></rich-text>
							</view>
							<image src="@/static/search2.png" mode="aspectFill" class="image1"></image>
						</view>
					</view>
				</view>
				<view class="middle" v-if="navindex == 1">
					<view class="m-t">
						价格范围<text>MHB</text>
					</view>
					<view class="m-inputs">
						<view class="i">
							<input type="number" v-model="number1" placeholder="最低价格范围"
								placeholder-style="font-size: 26rpx;color: #D1D1D6;" />
						</view>
						<view class="i2">
							-
						</view>
						<view class="i">
							<input type="number" v-model="number2" placeholder="最高价格范围"
								placeholder-style="font-size: 26rpx;color: #D1D1D6;" maxlength="9" />
						</view>
					</view>
				</view>
				<view class="middle" style="padding: 0 0rpx 10rpx;" v-if="navindex == 2">
					<view class="selectList">
						<view class="items" :class="item.isclick?'itemsSelect':''" v-for="(item,index) in orderList"
							:key="index" @click="changeSelect(item)">
							{{item.name}}
							<uni-icons v-if="item.isclick" type="checkmarkempty" color="#FF6F07"></uni-icons>
						</view>
					</view>
				</view>
				<view v-if="navindex != 2" class="pop-btns u-flex u-col-center u-row-between">
					<view class="btn btn1" @click="popRest">
						重置
					</view>
					<view class="btn btn2" @click="popSunmit">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" type="bottom" :safe-area="false">
			<view class="pop-footer">
				<uni-icons type="closeempty" size="22" color="#AEAEAE" class="icons" @click="close(2)"></uni-icons>
				<view class="f-title">
					查看信息
				</view>
				<view class="f-list">
					<view class="item item1 u-flex u-col-center u-row-between" @click="seePay" v-if="dypay==1">
						<image src="../../static/order12.png" mode="aspectFill" class="bg"></image>
						<view class="img">
							<image src="../../static/order11.png" mode="aspectFill"></image>
						</view>
						<view class="con" style="color: #B44B00;">
							支付{{dyprice}}商人币立即获得1次查看次数
						</view>
					</view>
					<view class="item item2 u-flex u-col-center u-row-between" @click="seeAd" v-if="dyquery==1">
						<image src="../../static/order22.png" mode="aspectFill" class="bg2"></image>
						<view class="img">
							<image src="../../static/order21.png" mode="aspectFill"></image>
						</view>
						<view class="con" style="color: #003B9D;">
							查看广告，免费获取查看次数
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup3" type="center">
			<view class="pop-data">
				<view class="data-img">
					<image :src=" data.image" mode="aspectFill" v-if="data.image"></image>
					<image src="@/static/img.png" class="no" mode="aspectFill" v-else></image>
				</view>
				<view class="data-con">
					<view class="title u-line-2">
						{{data.name}}
					</view>
					<view class="price" v-if="data.price">
						<text class="p"
							:class="{'p1':getPriceLength(data.price)<6,'p2':getPriceLength(data.price)==6,'p3':getPriceLength(data.price)==7,'p4':getPriceLength(data.price)==8,'p5':getPriceLength(data.price)>=9,}">
							{{$numToLocaleString(data.price)}}</text>
						<text class="y">MHB</text>
					</view>
					<view class="info">
						{{data.gameZoneName}}
					</view>
					<view class="info2">
						<view class="p">
							ID：{{data.account}} <text @click="$copyFun(data.account)">复制</text>
						</view>
						<view class="p">
							{{data.wechat}} <text @click="$copyFun(data.wechat)">复制</text>
						</view>
					</view>
				</view>
				<view class="close" @click="close(3)">
					<image src="@/static/close.png" mode="aspectFill"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		webconfig,
		getUserinfo,
		getSearchList,
		zoneList,
		searchpay,
		searchinfo,
		updateNumber
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				navlist: ['大区名称', '报价筛选', '排序'],
				navindex: 0,
				number1: "",
				number2: "",
				flist: [],
				kw: '',


				indexa: -1,
				dyprice: '', //信息查询费用抖音
				data: {},
				pages: 0,
				userInfo: {},
				ad: null,
				dyquery: 1, //信息查询广告抖音 1开启 0关闭
				formattedDate: '',
				nomore: false,

				id: "",
				dypay: 1, //信息查询付费抖音 1开启 0关闭

				list: [],
				nolist: false,
				params: {
					type: 2,
					name: '',
					gameZoneName: "",
					priceBegin: "",
					priceEnd: "",
					page: 1,
					order: 1
				},


				orderList: [{
						name: '默认排序',
						order: 1,
						isclick: true
					},
					{
						name: '最新发布',
						order: 2,
						isclick: false
					},
					{
						name: '价格从低到高',
						order: 3,
						isclick: false
					},
					{
						name: '价格从高到低',
						order: 4,
						isclick: false
					}
				]

			}
		},
		onLoad(o) {
			console.log(o);
			this.params.name = o.name || ''
			this.params.type = o.type || 2
			uni.setNavigationBarTitle({
				title: this.params.type == 2 ? '查询收货报价' : "查询现货报价"
			})
			const dateObj = new Date();
			const year = dateObj.getFullYear(); // 获取当前年份
			const month = ("0" + (dateObj.getMonth() + 1)).slice(-2); // 获取当前月份，其中需要将月份加1，因为月份是从0开始计数的
			const day = ("0" + dateObj.getDate()).slice(-2); // 获取当前日期
			this.formattedDate = `${year}-${month}-${day}`; // 格式化日期
			this.getlist()
			this.getwebconfig()
			this.getUser()
		},
		onUnload() {
			if (this.ad) {
				this.ad.offClose(this.onCloseListener);
				this.ad.destroy()
			}
			uni.removeStorageSync('getBuyData')
			uni.removeStorageSync('uid')
			uni.removeStorageSync('sListPageRandom')
		},
		onReachBottom() {
			this.params.page++
			this.getlist()
		},
		computed: {
			getPriceLength() {
				return (data) => {
					if (!data) return 1

					function getDigitCount(num) {
						if (num === 0) return 1;

						num = Math.abs(parseInt(num)); // 忽略小数部分，只处理整数
						return Math.floor(Math.log10(num)) + 1;
					}
					let l = getDigitCount(data)
					return l

				}
			},
		},
		methods: {
			changeSelect(item){
				console.log(item);
				this.orderList.forEach(item=>{
					item.isclick = false
				})
				item.isclick = true
				this.close(1)
				this.params.order = item.order
				this.params.page = 1
				this.list = []
				this.getlist()
				
			},
			getlist() {
				getSearchList(this.params).then(res => {
					if (res.code == 200) {
						if (this.params.page > 1 && res.data.list.length == 0) {
							this.nomore = true
						}
						this.list = [...this.list, ...res.data.list]
						this.nolist = this.list.length == 0
					}
				})
			},
			getUser() {
				getUserinfo({}).then(res => {
					if (res.code == 200) {
						this.userInfo = res.data
					}
				})
			},
			getwebconfig() {
				webconfig({}).then(res => {
					if (res.code == 200) {
						this.dypay = res.data.dypay
						this.dyquery = res.data.dyquery
						this.dyprice = res.data.dyprice
					}
				})
			},
			change(index) {
				this.navindex = index
				this.$refs.popup1.open()
			},
			change2(index) {
				this.navindex = index
			},
			popSunmit() {
				if (this.number1 && this.number2 && parseFloat(this.number1) > parseFloat(this.number2)) {
					this.$modal.msg('输入金额有误')
					return
				}
				if (this.number1) {
					this.params.priceBegin = this.number1
				}
				if (this.number2) {
					this.params.priceEnd = this.number2
				}
				this.params.gameZoneName = this.kw
				this.close(1)
				this.params.page = 1
				this.list = []
				this.getlist()
			},
			popRest() {
				this.params.gameZoneName = ''
				this.params.priceBegin = ''
				this.params.priceEnd = ''
				this.number1 = ''
				this.number2 = ''
				this.kw = ''
				this.params.page = 1
				this.list = []
				this.getlist()
			},
			changeZone(data) {
				this.params.gameZoneName = data.name
				this.kw = data.name
				this.flist = []
			},
			confirm() {
				if (!this.kw) {
					uni.showToast({
						title: '请输入',
						icon: "none"
					});
					return
				}
				this.$throttling(() => {
					zoneList({
						name: this.kw
					}).then(res => {
						if (res.code == 200) {
							this.flist = res.data.list
							this.flist.forEach(item => {
								if (item.name.includes(this.kw)) {
									const wrappedStr = item.name.replace(new RegExp(this.kw, 'g'),
										`<span style="color:#FF6F07">${this.kw}</span>`);
									item.name2 = wrappedStr
								} else {
									item.name2 = item.name
								}
							})
						}
					})
				})
			},
			open2(data) {
				this.id = data.id
				if (this.dypay == 1 || this.dyquery == 1) {
					// 开启付费
					let list = uni.getStorageSync('getBuyData') || []
					if (list.length > 0) {
						let uid = uni.getStorageSync('uid')
						let ulist = list.filter(item => item.uid == uid && this.formattedDate == item.date && item.id ==
							this.id && item.random == uni.getStorageSync('sListPageRandom'))
						if (ulist.length > 0) {
							// 已买过
							this.getData()
						} else {
							this.$refs.popup2.open()
						}
					} else {
						this.$refs.popup2.open()
					}
				} else {
					// 关闭付费 全免费看：只记录第一次，后续不再记录
					let list = uni.getStorageSync('getBuyData') || []
					let uid = uni.getStorageSync('uid')
					// 过滤出当前用户、当天、当前信息ID的记录
					let ulist = list.filter(item =>
						item.uid == uid &&
						this.formattedDate == item.date &&
						item.id == this.id &&
						item.random == uni.getStorageSync('sListPageRandom')
					)
					if (ulist.length > 0) {
						// 已有记录（非第一次），直接查看，不记录
						this.getData()
					} else {
						// 无记录（第一次），查看并记录
						this.getData()
						this.upData()
					}
				}
			},
			getData() {
				searchinfo(this.id).then(res => {
					if (res.code == 200) {
						this.data = res.data
						this.$refs.popup2.close()
						this.$refs.popup3.open()
					}
				})
			},
			close(type) {
				if (type == 1) {
					this.$refs.popup1.close()
				}
				if (type == 2) {
					this.$refs.popup2.close()
				}
				if (type == 3) {
					this.$refs.popup3.close()
				}
			},
			seePay() {
				if (this.userInfo.coin < this.dyprice) {
					this.$modal.msg('商人币不足')
					return
				}
				uni.showModal({
					title: '温馨提示',
					content: `确认支付${this.dyprice}商人币查看信息`,
					success: (res) => {
						if (res.confirm) {
							searchpay({
								id: this.id,
								paytype: 1
							}).then(res => {
								if (res.code == 200) {
									this.$modal.msg('支付成功')
									this.getData()
									this.upData()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			upData() {
				updateNumber(this.id).then(res => {
					let list = uni.getStorageSync('getBuyData') || []
					let data = {
						uid: uni.getStorageSync('uid'),
						date: this.formattedDate,
						id: this.id,
						random: uni.getStorageSync('sListPageRandom')
					}
					list.push(data)
					uni.setStorageSync('getBuyData', JSON.parse(JSON.stringify(list)))
				})
			},
			seeAd() {
				uni.showLoading({
					title: '加载中...'
				})
				// #ifdef MP-TOUTIAO
				// 先销毁已存在的广告实例，避免重复绑定
				if (this.ad) {
					this.ad.offClose() // 移除之前的关闭事件监听
					this.ad.destroy() // 销毁实例
				}
				// 创建新的广告实例
				this.ad = tt.createRewardedVideoAd({
					adUnitId: "qnyjogx75a7vfoogil",
				});

				// 监听错误
				this.ad.onError((err) => {
					tt.hideLoading();
					uni.hideLoading();
					uni.showToast({
						title: `广告错误: ${err.errCode}`,
						icon: "none"
					});
				});

				// 定义关闭事件处理函数
				const closeHandler = (data) => {
					// 先移除事件监听，避免重复执行
					this.ad.offClose(closeHandler);

					uni.hideLoading();
					if (data.isEnded) {
						this.$modal.msg('观看完成')
						this.getData()
						this.upData()
					} else {
						this.$modal.msg('未观看完视频')
					}
					// 完成后销毁实例
					this.ad.destroy();
					this.ad = null;
				};

				// 绑定关闭事件
				this.ad.onClose(closeHandler);

				// 加载并显示广告
				this.ad.load()
					.then(() => {
						this.ad.show()
							.catch(err => {
								console.error('广告显示失败', err);
								uni.hideLoading();
								this.$modal.msg('广告加载失败，请重试')
							})
					})
					.catch(err => {
						console.error('广告加载失败', err);
						uni.hideLoading();
						this.$modal.msg('广告加载失败，请重试')
					})
				// #endif
			},
			onCloseListener(res) {
				console.log(res)
			},
		}
	}
</script>

<style lang="less">
	@color: #FF6F07;

	page {
		background: #fff !important;
	}

	.container {
		padding: 80rpx 20rpx 20rpx;

		.nomore {
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			color: #979797;
			font-size: 24rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
		}

		.nolist {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 40rpx 0;

			image {
				width: 160rpx;
				height: 136rpx;
			}

			.p {
				margin-top: 20rpx;
				line-height: 40rpx;
				height: 40rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #979797;
				text-align: center;

			}
		}



		.list {
			.item {
				border-bottom: 2rpx solid #eee;
				padding: 30rpx 0;
				background: #fff;

				.img {
					width: 220rpx;
					height: 220rpx;
					border-radius: 20rpx;
					overflow: hidden;
					background-color: #F8F8F8;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;


					image {
						width: 100%;
						height: 100%;
					}

					.no {
						width: 100rpx;
						height: 100rpx;
					}
				}

				.con {
					flex: 1;
					width: 1rpx;
					margin-left: 20rpx;

					.title {
						line-height: 40rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #11192D;
						text-align: left;

					}

					.price {
						height: 50rpx;
						line-height: 50rpx;


						.p {
							font-family: "DIN";
							font-weight: bold;
							font-size: 36rpx;
							text-align: left;

						}

						.p5 {
							color: #FF70A4;
						}

						.p4 {
							color: #840FFB;
						}

						.p3 {
							color: #FE1515;
						}

						.p2 {
							color: #1EC742;
						}

						.p1 {
							color: #11192D;
						}

						.y {
							color: #979797;
							font-size: 20rpx;
							margin-left: 10rpx;
							font-weight: 400;
							height: 40rpx;
							line-height: 40rpx;
						}


					}

					.info {

						height: 40rpx;
						line-height: 40rpx;
						background: #F9F9F9;
						border-radius: 8rpx;
						padding: 0 10rpx;
						color: #979797;
						font-size: 20rpx;
						margin-top: 10rpx;
					}

					.info2 {
						background: #F9F9F9;
						border-radius: 8rpx;
						padding: 10rpx;
						margin-top: 10rpx;

						.i1 {
							line-height: 40rpx;
							height: 40rpx;

							text {
								color: #979797;
								font-size: 20rpx;
							}

							image {
								width: 30rpx;
								height: 30rpx;
								margin-left: 20rpx;
							}
						}

						.i2 {
							color: #FF6F07;
							font-size: 20rpx;
							line-height: 40rpx;
							height: 40rpx;
						}

					}
				}
			}
		}

		.index-nav {
			position: fixed;
			z-index: 9;
			left: 0;
			right: 0;
			top: 0;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #fff;
			justify-content: space-between;
			padding: 0rpx 30rpx;
			box-sizing: border-box;

			.item {
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				color: #11192D;

				text {
					margin-right: 10rpx;
				}

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}

	.pop-data {
		padding: 20rpx;
		width: 620rpx;
		min-height: 620rpx;
		box-sizing: border-box;
		position: relative;
		background: #fff;
		border-radius: 30rpx;

		.close {
			position: absolute;
			bottom: -100rpx;
			left: 50%;
			margin-left: -30rpx;
			width: 60rpx;
			height: 60rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.data-img {
			width: 100%;
			height: 340rpx;
			overflow: hidden;
			border-radius: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.data-con {
			margin-top: 20rpx;


			.title {
				line-height: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #11192D;
				text-align: left;

			}

			.price {
				height: 50rpx;
				line-height: 50rpx;


				.p {
					font-family: "DIN";
					font-weight: bold;
					font-size: 36rpx;
					text-align: left;

				}

				.p5 {
					color: #FF70A4;
				}

				.p4 {
					color: #840FFB;
				}

				.p3 {
					color: #FE1515;
				}

				.p2 {
					color: #1EC742;
				}

				.p1 {
					color: #11192D;
				}

				.y {
					color: #979797;
					font-size: 20rpx;
					margin-left: 10rpx;
					font-weight: 400;
					height: 40rpx;
					line-height: 40rpx;
				}


			}

			.info {

				height: 40rpx;
				line-height: 40rpx;
				background: #F9F9F9;
				border-radius: 8rpx;
				padding: 0 10rpx;
				color: #979797;
				font-size: 20rpx;
				margin-top: 10rpx;

				text {
					margin-left: 20rpx;
					color: #FF6F07;
				}
			}

			.info2 {


				background: #F9F9F9;
				border-radius: 8rpx;
				padding: 0 10rpx;
				color: #979797;
				font-size: 20rpx;
				margin-top: 10rpx;

				.p {
					height: 40rpx;
					line-height: 40rpx;
				}

				text {
					margin-left: 20rpx;
					color: #FF6F07;
				}
			}
		}

	}

	.pop-footer {
		padding: 40rpx 30rpx;
		background: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		min-height: 300rpx;

		.icons {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}

		.f-title {
			height: 60rpx;
			line-height: 60rpx;
			font-weight: bold;
			font-size: 40rpx;
			color: #000000;
			text-align: center;

		}

		.f-list {
			margin-top: 40rpx;

			.item {
				margin-bottom: 30rpx;
				position: relative;
				height: 140rpx;
				border-radius: 20rpx;
				overflow: hidden;
				padding: 0 30rpx;

				.bg {
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					width: 340rpx;
					height: 140rpx;
					z-index: 1;
					// filter: blur(100rpx);
				}

				.bg2 {
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					width: 422rpx;
					height: 140rpx;
					z-index: 1;
					// filter: blur(100rpx);
				}

				.img {
					position: relative;
					z-index: 999;
					width: 68rpx;
					height: 68rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.con {
					flex: 1;
					width: 1rpx;
					margin-left: 30rpx;
					position: relative;
					z-index: 999;
					font-weight: 500;
					font-size: 32rpx;

					.n {
						height: 44rpx;
						line-height: 44rpx;

						text-align: left;
					}

					.m {
						line-height: 30rpx;
						height: 30rpx;
						font-size: 20rpx;
						text-align: left;
					}
				}
			}

			.item1 {
				background: linear-gradient(90deg, #FFFAEA 0%, #FFDEA9 100%);

				.con {
					.n {
						color: #B44B00;
					}

					.m {
						color: #DFA021;
					}
				}
			}

			.item2 {
				background: linear-gradient(90deg, #EEF8FF 0%, #73B0FF 100%);

				.con {
					.n {
						color: #003B9D;
					}

					.m {
						color: #3371C2;
					}
				}
			}
		}
	}



	.pop-search {
		// padding: 0 30rpx 10rpx;
		background: #fff;
		height: 430rpx;
		box-sizing: border-box;
		border-radius: 0rpx 0rpx 30rpx 30rpx;
		.pop-btns {
			margin-top: 20rpx;
			padding: 0rpx 30rpx;
			.btn {
				width: calc(50% - 15rpx);
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 12rpx;
				text-align: center;
				font-size: 32rpx;
			}

			.btn1 {
				color: #11192D;
				background: #F4F4F4;
			}

			.btn2 {
				color: #fff;
				background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);

			}
		}

		.middle {
			height: 230rpx;
			padding: 0 30rpx 10rpx;

			.search {
				height: 64rpx;
				line-height: 64prx;
				background: #F5F5F5;
				border-radius: 12rpx;
				padding: 0 20rpx;
				box-sizing: border-box;

				image {
					width: 32rpx;
					height: 32rpx;
				}

				input {
					flex: 1;
					margin-left: 20rpx;
					width: 1rpx;
					height: 64rpx;
					line-height: 64prx;
					font-size: 26rpx;
					color: #11192D;
				}
			}

			.s-list {
				background: #F5F5F5;
				padding: 10rpx;
				border-radius: 0 0 10rpx 10rpx;

				.i {
					height: 64rpx;
					line-height: 64prx;
					display: flex;
					align-items: center;
					justify-content: space-between;


					.image1 {
						width: 32rpx;
						height: 32rpx;
					}

					.image2 {
						width: 40rpx;
						height: 40rpx;
					}

					.m {
						flex: 1;
						width: 1rpx;
						padding: 0 10rpx;
						font-size: 26rpx;
						color: #11192D;

						text {

							color: @color;
						}
					}
				}
			}

			.selectList {
				.items {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					height: 80rpx;
					line-height: 80rpx;
					display: flex;
					justify-content: space-between;
					padding: 0rpx 30rpx;
				}

				.itemsSelect {
					padding: 0rpx 30rpx;
					background: #FFF6F0;
					height: 80rpx;
					color: #FF6F07 !important;
				}
			}

			.m-t {
				line-height: 40rpx;
				height: 40rpx;
				font-size: 28rpx;
				color: #000000;
				text-align: left;

				text {
					font-size: 20rpx;
					color: #979797;
					margin-left: 10rpx;
				}
			}

			.m-inputs {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;

				.i {
					width: 300rpx;
					height: 60rpx;
					background: #F5F5F5;
					border-radius: 8rpx;
					line-height: 60rpx;
					padding: 0 10rpx;
					box-sizing: border-box;

					input {
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						font-size: 26rpx;
						color: #11192D;
					}
				}

				.i2 {
					width: 28rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					font-weight: 500;
					font-size: 48rpx;
					color: #979797;
				}
			}
		}

		.nav {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			justify-content: space-between;
			padding: 0rpx 30rpx;
			box-sizing: border-box;

			.item {
				// flex: 1;
				text-align: center;

				text {
					color: #11192D;
					font-size: 30rpx;
				}

				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}
			}

			.on {
				text {
					color: @color;
				}

			}
		}
	}
</style>